<template>
    <view>
        <NavBar :title="'申请人承诺书'" />
        <scroll-view scroll-y="true" class="scroll-Y">
            <!-- 姓名 -->
            <view class="uni-form-item uni-column con-clim">
                <view class="title">
                    <text class="content">申请人承诺书</text>
                    <text class="icon">*</text>
                </view>
				<view class="btn-box">
					<u-button class="btn" text="下载样表"></u-button>
					<u-button class="btn btns" text="查看示例"></u-button>
				</view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">最多上限5个文件，最大500MB/个</text>
                </view>
                <u-upload
                    :fileList="form.fileList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="1"
                    multiple
                    :maxCount="9"
                    :previewFullImage="true"
                >
                    <u-button class="btne" text="上传图片"></u-button>
                </u-upload>
            </view>
        </scroll-view>
        <view class="but">
            <view class="submit" @click="submitClick">保存</view>
        </view>
		
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: '',
                household: '',
                phone: '',
                fileList: []
            }
        };
    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        },
        // 提交表单
        submitClick() {
            console.log('提交表单');
            this.$u.toast('提交成功');
            this.$u.route({
                url: '/pages/fromTable/disabled/index'
            });
        },
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file);
            let fileList = this.form.fileList;
            let fileListLen = fileList.length;
            lists.map((item) => {
                fileList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url);
                let item = fileList[fileListLen];
                fileList.splice(
                    fileListLen,
                    1,
                    Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    })
                );
                fileListLen++;
            }
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                    filePath: url,
                    name: 'file',
                    formData: {
                        user: 'test'
                    },
                    success: (res) => {
                        setTimeout(() => {
                            resolve(res.data.data);
                        }, 1000);
                    }
                });
            });
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
        },
		
			submitClick() {
			    console.log('提交表单');
			    this.$u.toast('提交成功');
			    this.$u.route({
			        url: '/pages/fromTable/bankruptcy/index'
			    });
			}
		
    }
};
</script>

<style lang="scss" scoped>
.scroll-Y {
    width: 100%;
    padding: 46rpx 0;
    height: calc(100vh - 369rpx);
    background-color: #fff;
    font-family: PingFang SC, PingFang SC;
	.con-clim{
		border-bottom:none !important;
	}
    .uni-column {
        font-weight: 400;
        font-size: 31rpx !important;
        color: rgba(0, 0, 0, 0.8);
        padding: 15rpx 0;
        width: 90%;
        margin: 0 auto;
        border-bottom: 1rpx solid #d0d3d6;
    }
    .title {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        .icon {
            font-weight: 400;
            font-size: 27rpx;
            color: #dc0000;
            margin-left: 8rpx;
        }
        .content {
            ont-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 27rpx;
            color: rgba(0,0,0,0.6);
        }
    }
}
.btn {
   width: 154rpx;
   height: 69rpx;
   border-radius: 8rpx 8rpx 8rpx 8rpx;
   border: 1rpx solid #2C5E9F;
   font-family: PingFang SC, PingFang SC;
   font-weight: 400;
   font-size: 29rpx;
   color: #2C5E9F;
   text-align: center;
   line-height: 69rpx;
}
.btns{
	margin-left: 7.69rpx;
}
.btne{
	width: 154rpx;
	height: 69rpx;
	background: #2C5E9F;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 29rpx;
	color: #FFFFFF;
}
.btn-box{
	display: flex;
}
	.but {
		padding-top: 15rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #D0D3D6;
		.submit {
			margin: 0 auto;
			width: 688rpx;
			height: 92rpx;
			background: #2C5E9F;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
		}
	}
</style>
